<template>
  <div id="user">
    <u-header cen="个人资料"></u-header>
    <van-cell title="头像" is-link><!-- 使用 title 插槽来自定义标题 -->
      <template #right-icon>
        <span class="cont-r_l">
          <van-uploader
            :after-read="afterRead"
            :upload-icon="URL"
            image-fit="round"
            :max-count="1"
            class="user-t"
            preview-size="40px">
            <van-image
              ref="goodsImg"
              width="40px"
              height="40px"
              round
              :src="URL"
            ></van-image>
          </van-uploader>
        </span>
      </template></van-cell>
    <van-cell title="昵称：" is-link>
      <input type="text" v-model="name" style="text-align: right">
    </van-cell>
    <van-cell title="性别：" is-link>
      <input type="text" v-model="sext" style="text-align: right">
    </van-cell>
    <van-cell title="手机号：" is-link>
      <input type="text " maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="tel" style="text-align: right">
    </van-cell>
    <van-cell v-model="chostime" title="生日" is-link @click="showshengri"></van-cell>
    <van-popup round v-model="hide" position="bottom" :style="{height: '39%'}">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirm"
      />
    </van-popup>
    <van-button @click="shangchuan" class="but" type="primary" round size="large">上传</van-button>
  </div>
</template>

<script>
import UHeader from '../../components/back/back'
import axios from 'axios'
import { Popup, Cell, Uploader, Image, Dialog, Button, DatetimePicker, RadioGroup, Radio } from 'vant'
import 'vant/lib/button/index.css'
import 'vant/lib/datetime-picker/style'
import 'vant/lib/cell/index.css'
import 'vant/lib/image/index.css'
import 'vant/lib/uploader/style'
import 'vant/lib/popup/style'
import 'vant/lib/radio-group/style'
import 'vant/lib/radio/style'
// 数据引入
import { getuser, getuserpost } from '../api'
const uid = window.location.href.split('?')[1].split('=')[1]
export default {
  name: 'user',
  data () {
    return {
      // 时间
      chostime: '请选择',
      URL: '',
      // 昵称
      name: '',
      show: false,
      hide: false,
      // 地址
      con: '',
      // 日期
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2021, 10, 1),
      currentDate: new Date(),
      // 性别
      sext: '',
      // 电话
      tel: ''
    }
  },
  mounted () {
    getuser({
      uid
    }).then((res) => {
      this.URL = res.image_url
      this.tel = res.phone
      this.sext = res.sex
      this.name = res.real_name
      this.chostime = res.birthday
    })
  },
  methods: {
    afterRead (file) {
      this.$refs.goodsImg.src = file.content
      const params = new FormData()
      params.append('userfile', file.file)
      // const userfile = file.content
      axios.post('http://47.96.78.105:8087', params).then((res) => {
        const good = res.data.data
        const url = good.imgid
        this.URL = 'http://47.96.78.105:8087/' + url + '?w=300'
      }).then(() => {
        Dialog.alert({
          message: '图片上传成功'
        })
      })
    },
    // 时间格式
    timeFormat (time) { // 时间格式化 2019-09-08
      const year = time.getFullYear()
      const month = time.getMonth() + 1
      const day = time.getDate()
      return year + '年' + month + '月' + day + '日'
    },
    showshengri () {
      this.hide = true
    },
    // 日期拼接
    confirm (value) {
      this.chostime = this.timeFormat(value)
      this.hide = false
    },
    shangchuan () {
      getuserpost({
        uid,
        phone: this.tel,
        sex: this.sext,
        image_url: this.URL,
        real_name: this.name,
        birthday: this.chostime
      }).then((res) => {
        if (res === null) {
          Dialog.alert({
            message: '个人信息发布成功'
          })
        }
      })
    }
  },
  components: {
    UHeader,
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [Popup.name]: Popup,
    [Image.name]: Image,
    [Uploader.name]: Uploader,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio
  }
}
</script>

<style scoped>
  .but {
    width: 80%;
    margin: 30px 10%;
  }
  .van-popup {
    padding: 3px;
  }
  .van-radio-group {
    margin: 10px 0 10px 10px;
  }
  .van-radio-group > div {
  }
  .sexb span {
    float: right;
    margin-left: 20px;
  }
  input {
    border: 0;
    float: right;
    width: 50%;
    margin-right: -10%;
    padding-right: 20px;
  }
</style>
